<template>
	<view class="pageBox">
		<Header :title="'申请退款'"></Header>
		<view class="box">
			<view class="orderBox">
				<view class="title">
					<view class="iconfont icon-dianpu"></view>
					<!-- 店铺名称 -->
					<view class="storeName">{{data.body}}</view>
				</view>
				<view class="line"></view>
				<view class="main">
					<image class="pic" :src="data.orderProductList[0].coverPictureId" mode="widthFix"></image>
					<view class="mainRight">
						<view class="shopName">
							{{data.body}}
						</view>
						
					</view>
				</view>
				<view class="labelBox">
					<view class="label" style="display: flex;">
						<view style="flex-shrink: 0;">
							订单编号：
						</view>
						<span
							style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">{{data.externalNo}}</span>
					</view>
					<view class="label">
						订单数量：{{data.buyCount}}
					</view>
					<view class="label">
						订单单价：￥{{data.price}}
					</view>
					<view class="label">
						订单金额：￥{{data.needPayAmount}}
					</view>
					
				</view>
			</view>

			<view class="contactBox">
				<view class="title">
					商家联系方式
				</view>
				<view class="contactMain">
					<view class="phone">
						{{data.merchantMobile}}
					</view>
					<view class="contactBtn" @click="telsPhone(data.merchantMobile)">
						联系商家
					</view>
				</view>
			</view>
			<view class="formBox">
				<u--form labelPosition="left" :model="form" ref="uForm" label-width="130rpx">
					<u-form-item label="申请件数" borderBottom>
						<u--input placeholder="请填写申请件数" @input="NumberRules" type="number" disabledColor="#ffffff"
							v-model="form.number" :border="false" />
					</u-form-item>
					<u-form-item label="收货状态" borderBottom @click="showStatus = true;">
						<u--input v-model="form.status" disabled placeholder="点击选择收货状态" disabledColor="#ffffff"
							:border="false" />
						<u-icon slot="right" @click="showStatus = true;" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="申请原因" borderBottom @click="showCause = true;">
						<u--input v-model="form.cause" disabled placeholder="点击选择申请原因" disabledColor="#ffffff"
							:border="false" />
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>
			<view class="totalBox">
				<view class="toplabel">
					申请金额
				</view>
				<view class="price">
					<span style="font-size: 30rpx;">￥</span>
					<!-- {{form.number * data.unitPrice - data.deductionPrice<0?0:form.number * data.unitPrice - data.deductionPrice}} -->
				{{form.number * data.price}}
				</view>
			</view>
			<view class="totalBox">
				<view class="toplabel">
					退回礼品卡金额
				</view>
				<view class="price">
					<span style="font-size: 30rpx;">￥</span>
					<!-- {{data.deductionPrice}} -->0
				</view>
			</view>
			<view class="problem">
				<view class="problemTit">
					问题描述
				</view>
				<view class="inputArea">
					<u--textarea v-model="describe" placeholder="点击输入您遇到的问题，有助于退款"></u--textarea>
				</view>
				<view class="uploadBox">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</view>
			<view class="logisticsBox">
				<u--form labelPosition="left" :model="form1" ref="uForm" label-width="130rpx">
					<u-form-item label="物流公司" borderBottom @click="showCompany = true;" >
						<u--input v-model="form1.logisticsCompany" disabled placeholder="如有商品退回请选择"
							disabledColor="#ffffff" :border="false" />
						<u-icon slot="right" @click="showCompany = true;" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="运单编号" borderBottom>
						<u--input v-model="form1.waybillNumber" :border="false" />
					</u-form-item>
				</u--form>
			</view>
			<view class="submitBtn" @click="submitEvent">
				立即提交
			</view>
		</view>
		<u-action-sheet :show="showStatus" :actions="actions" title="请选择收货状态" @close="showStatus = false"
			@select="statusSelect">
		</u-action-sheet>
		<u-action-sheet :show="showCause" :actions="actions1" title="请选择申请原因" @close="showCause = false"
			@select="causeSelect">
		</u-action-sheet>
		<!-- 	<u-action-sheet class="actionSheet" :show="showCompany" :actions="actions2" title="请选择物流公司"
			@close="showCompany = false" @select="companySelect">
		</u-action-sheet> -->
		<u-picker @cancel="showCompany = false" @confirm="companySelect" :show="showCompany" :columns="actions2"
			keyName="name"></u-picker>
		<!-- <privacyPopup :showPop="showPop" exitApp bind:handle="popBtnTap"></privacyPopup> -->



	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	import CompanyList from '@/common/js/courierServicesCompany.js'
	export default {
		data() {
			return {
				showPop: false, //授权
				showCompany: false,
				showStatus: false,
				showCause: false,
				form: {
					number: '',
					status: '',
					statusId: '',
					cause: '',
				},
				form1: {
					waybillNumber: '',
					logisticsCompany: '',
					serialNumber: '',
				},
				actions: [
					{
						name: '未收货',
						statusId: 0
					},
					{
						name: '已收货',
						statusId: 1
					}
				],
				actions1: [{
						name: '商品与描述不符',
					},
					{
						name: '商品破损',
					},
					{
						name: '不想要了',
					},
					{
						name: '未发货',
					}
				],
				actions2: [],
				problem: '',
				fileList1: [],
				picture: [],
				data: {},
				describe: '',
				ossIds: '',
				baseUrl:'',
				type:'申请退款'



			}
		},

		async onLoad(e) {
			// if (e.item != undefined) {
			// 	console.log(e.item)
			// 	let obj = JSON.parse(e.item)
			// 	if (e.type=='申请修改') {
			// 		this.$api.request('admin/refund/client/' + obj.id, 'get').then(res => {
			// 			if (res.code == 200) {
			// 				// 照片数据转数组
			// 				if (res.data.picture==null || res.data.picture=='') {
			// 					res.data.picture = []
			// 				} else {
			// 					res.data.picture = res.data.picture.split(",")
			// 					let ossIdList=res.data.ossId.split(",")
			// 					res.data.picture.forEach((item,i)=>{
			// 						this.picture.push({url:item,ossId:ossIdList[i]})
			// 					})
			// 					this.picture.forEach(item=>{
			// 						this.fileList1.push({url:item.url,type: "image",ossId:item.ossId})
			// 					})
			// 				}
			// 				// //物流公司编码转对应 物流公司名称
			// 				let companyName = ''
			// 				CompanyList.forEach(item => {
			// 					if (res.data.logistics === item.serialNumber) {
			// 						companyName = item.name

			// 					}
			// 				})
			// 				this.data = res.data
			// 				this.data.id = this.data.orderId
			// 				this.describe = this.data.description
			// 				this.form.number = this.data.number
			// 				this.form.cause = this.data.cause
			// 				this.form.status = this.data.state === 0 ? '未收货' : '已收货'
			// 				this.form.statusId = this.data.state
			// 				this.form1.waybillNumber = this.data.waybill
			// 				this.form1.logisticsCompany = companyName
			// 				this.form1.serialNumber = this.data.logistics
			// 			}
			// 		})
			// 	} else {
					
			// 	}
			// }
			this.data = JSON.parse(uni.getStorageSync('draw'))
		// 	const privacySettingRes = await this.getPrivacySetting();
		
		},
		onShow() {
			this.actions2=[]
			this.actions2.push(CompanyList)
			
		
			let that=this
			uni.getStorage({
				key: 'baseUrl',
				success: function(res) {
					that.baseUrl=res.data
				}
			});
		},
		onReady() {

		},
		components: {
			Header
		},
		methods: {
			
			NumberRules(value) {
				let number = this.form['number']
				this.$nextTick(() => {
					let oldValue = value
					this.form.number = number.replace(/\D/g, '')
					if (this.form.number < 0 || this.form.number == 0) {
						// this.form.number=1
					} else if (this.form.number > this.data.totalNum) {
						this.form.number = this.data.totalNum
					}
				});
			},
			// /**
			//  * 获取隐私协议授权信息
			//  * @returns {object} {needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》'}
			//  */
			getPrivacySetting() {
				const res = {
					needAuthorization: false,
					privacyContractName: "基础库过低，不需要授权",
				};
				if (!wx.getPrivacySetting) return res;
				return new Promise((resolve, reject) => {
					wx.getPrivacySetting({
						success(res) {
							resolve(res);
						},
						fail(err) {
							reject(err);
						},
					});
				});
			},
			popBtnTap(res) {
				// console.log("授权结果返回数据 :>> ", res);
				// console.log("授权结果 :>> ", res.detail);
				if (res.detail.result) {
					wx.showToast({
						title: "同意授权",
						icon: "success",
					});
				} else {
					wx.showToast({
						title: "拒绝授权",
						icon: "error",
					});
				}
			},
			async submitEvent() {
				let pictureString = ''
			
				this.picture.forEach(item => {
					pictureString +=item.ossId + ','
				})
				if (this.form.number > this.data.totalNum) {
					uni.showToast({
						title: '申请数超出',
						icon: 'error'
					})
					return
				} else if (this.form.number == 0) {
					uni.showToast({
						title: '申请数不能为0',
						icon: 'error'
					})
					return
				}
				// console.log(this.form.cause)
				if (this.form.cause === '') {
					uni.showToast({
						title: '请选择申请原因',
						icon: 'error'
					})
					return
				}
				if (this.form.statusId === '') {
					uni.showToast({
						title: '请选择收货状态',
						icon: 'error'
					})
					return
				}
				console.log(this.data)
				let params = {
					orderId: this.data.id,
					receiveStatus: this.form.statusId,
					applyCount: this.form.number,
					reason: this.form.cause,
					// deductionPrice: this.data.deductionPrice,
					// money: this.form.number * this.data.unitPrice,
					refundAmount:this.form.number * this.data.price,
					deliveryNum: this.form1.serialNumber, //快递编号
					// waybill: this.form1.waybillNumber,
					// picture: pictureString.slice(0, -1) //去掉最末尾 ,号
				}
				
				let res = await this.$api.request('pay/refund/apply', 'post', params)
				if (res.code == 200) {
					uni.navigateTo({
						url: '/pages/my/order/sucessSubmit'
					})
				}

			},
			telsPhone(phoneNumber) {
				wx.makePhoneCall({
					phoneNumber: phoneNumber,
				})

			},
			statusSelect(e) {
				this.form.status = e.name
				this.form.statusId = e.statusId
			},
			causeSelect(e) {
				this.form.cause = e.name
				// console.log(this.form.cause)
			},
			companySelect(e) {
				this.form1.serialNumber = e.value[0].serialNumber
				this.form1.logisticsCompany = e.value[0].name
				this.showCompany = false
			},
			causeListCallback() {

			},
			statusCallback() {

			},
			// 删除图片
			deletePic(event) {
				// console.log(this.picture,'删除照片前')
				this[`fileList${event.name}`].splice(event.index, 1)

				this.$api.request('system/oss/batch/del/' + event.file.ossId, 'delete').then(res => {
					if (res.code == 200) {
						this.picture.forEach((item, index) => {
							if (event.file.ossId == item.ossId) {
								this.picture.splice(index, 1)
							}
						})
					}
				})
				console.log(this.picture,'删除照片后')

			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式


				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					// console.log('result', result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						fileName: result.fileName,
						ossId: result.ossId,
						url: result.url
					}))
					fileListLen++
				}
				console.log(this.fileList1,'图片文件')

			},
			uploadFilePromise(url) {
				let that=this
				return new Promise((resolve, reject) => {
					
					let a = uni.uploadFile({
						url: that.baseUrl+'system/oss/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							name: url
						},
						header: {
							Authorization: 'Bearer ' + uni.getStorageSync('token'),
						},
						success: (res) => {
							this.picture.push(JSON.parse(res.data).data)
							// console.log(this.picture)
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						},
						fail: (error) => {
							uni.showToast({
								title: '上传失败',
								duration: 2000
							});
						},
					});
				})
			},
		}
	}
</script>
<style>
	::v-deep .u-reset-button {
		height: 100rpx !important;

	}
</style>
<style lang="scss" scoped>
	.pageBox {
		background-color: #f5f5f5;
	}

	.box {
		padding: 23rpx 20rpx 0rpx;
	}

	.actionSheet {
		::v-deep .u-action-sheet__item-wrap {
			overflow: scroll !important;

			height: 70vh;
		}


	}

	.submitBtn {
		idth: 710rpx;
		height: 82rpx;
		background: #D42A1B;
		border-radius: 41rpx;
		text-align: center;
		line-height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin: 31rpx auto 29rpx;
	}

	.logisticsBox {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 19rpx;
		width: 710rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.problem {
		margin-top: 19rpx;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 29rpx 21rpx 27rpx;
		box-sizing: border-box;

		.problemTit {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-bottom: 10rpx;
		}

		.inputArea {
			margin-bottom: 10rpx;
		}

		.uploadBox {}
	}

	.totalBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		padding: 29rpx 22rpx 23rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;

		.toplabel {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.price {
			font-size: 46rpx;
			font-family: PingFang SC;
			font-weight: 400
		}
	}

	.formBox {
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: 19rpx;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.orderBox {
		width: 710rpx;
		padding-bottom: 28rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.title {
			height: 83rpx;
			display: flex;
			width: 100%;
			align-items: center;
			padding: 0 13rpx;

			.icon-dianpu {
				font-size: 31rpx;
				color: #333333;
				margin-right: 16rpx;
			}

			.storeName {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

		}

		.line {
			margin: 0 15rpx 0 12rpx;
			width: 683rpx;
			height: 1rpx;
			background: #E5E5E5;
		}

		.main {
			display: flex;
			padding: 22rpx 20rpx 28rpx;
			box-sizing: border-box;

			.pic {
				margin-right: 22rpx;
				width: 155rpx;
				height: 155rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
			}

			.mainRight {
				position: relative;
				width: 100%;
				display: flex;

				.shopName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.price {
					margin-left: auto;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.number {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999
				}

			}

		}

		.labelBox {
			width: 100%;
			box-sizing: border-box;
			padding: 0 18rpx;

			.label {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;

				&:nth-child(1) {
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.contactBox {
		margin-top: 23rpx;
		width: 710rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}


		.contactMain {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.phone {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #D42A1B;
			}

			.contactBtn {
				width: 202rpx;
				height: 63rpx;
				background: #FFFFFF;
				border: 1px solid #D42A1B;
				border-radius: 32rpx;
				text-align: center;
				line-height: 63rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #D42A1B;
			}
		}

	}
</style>